<template>
	<view class="">
		<view class="title justify-content-sp">
			<view class="title_text" :class="data_index == item.index?'change':''" v-for="(item,index) in dataList"
				:key="item.index" @click="changeIndex(item.index)">
				{{item.text}}
			</view>
		</view>
		<view class="img_body" v-if="data_index == 0">
			<view class="image">
				<image src="../../static/index/riqi.png" mode="" class="img"></image>
			</view>
			<view class="text">
				<text>{{tradeList[0].order_date}}</text>
			</view>
		</view>
		<view class="page" v-if="data_index == 0">
			<view class="bodys">
				<view class="cont" v-for="(item,index) in tradeList" :key="item.index">
					<view class="cont_body">
						<view class="order_title">
							<view class="order_id">
								订单编号:{{item.order_sn}}
							</view>
							<view class="order_status">
								{{item.status==0?'已支付':'未支付'}}
							</view>
						</view>
						<view class="order_cont">
							<view class="order_cont_left">
								商品名称:
							</view>
							<view class="order_cont_right">
								{{item.shop_name}}
							</view>
						</view>
						<view class="order_cont">
							<view class="order_cont_left">
								下单时间:
							</view>
							<view class="order_cont_right">
								{{item.create_date}}
							</view>
						</view>
						<view class="order_cont">
							<view class="order_cont_left">
								支付方式:
							</view>
							<view class="order_cont_right">
								{{item.pay_type=="minwechat"?'微信':'支付宝'}}
							</view>
						</view>
						<view class="order_cont">
							<view class="order_cont_left">
								付款时间:
							</view>
							<view class="order_cont_right">
								{{item.paytime}}
							</view>
						</view>
						<view class="order_cont justify-content-sp">
							<view class="order_cont red">
								￥{{item.pay_fee}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page" v-if="data_index == 1">
			<view class="bodys" v-for="(item,index) in tradeList" :key="item.index">
				<view class="bodys_title justify-content-sp">
					<view class="bodys_title_left">
						{{item.mdate}}
					</view>
					<view class="bodys_title_right">
						<!-- 当月明细> -->
					</view>
				</view>
				<view class="bodys_cont justify-content-sp">
					<view class="bodys_cont_left">
						<view class="bodys_cont_left_fir">
							交易额(元)
						</view>
						<view class="bodys_cont_left_se">
							￥{{item.all_fee}}
						</view>
					</view>
					<view class="bodys_cont_right">
						<view class="bodys_cont_right_fir">
							当月订单(笔)
						</view>
						<view class="bodys_cont_right_se">
							{{item.num}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBusinessOrderList,
		getBusinessOrderListMonth
	} from '../../api/busList/index.js'
	export default {
		data() {
			return {
				id: '',
				dataList: [{
						id: 0,
						text: "日报",
						index: 0
					},
					{
						id: 1,
						text: "月报",
						index: 1
					}
				],
				data_index: 0,
				tradeList: [],
				page: 1
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.init()
		},
		// 页面上拉触底方法
		onReachBottom() {
			this.page++;
			var data = {
				id: this.id,
				page: this.page
			};
			if (this.data_index == 0) {
				getBusinessOrderList(data).then(res => {
					this.tradeList.push(...res.data)
				})
			} else {
				getBusinessOrderListMonth(data).then(res => {
					this.tradeList.push(...res.data)
				})
			}
		},
		methods: {
			init() {
				var data = {
					id: this.id,
					page: this.page
				};
				getBusinessOrderList(data).then(res => {
					this.tradeList.push(...res.data)
				})
			},
			// 选择下标
			changeIndex(e) {
				this.data_index = e
				console.log(111, e);
				if (this.data_index == 1) {
					this.tradeList = [];
					this.page = 1;
					var data = {
						page: this.page,
						id: this.id
					}
					getBusinessOrderListMonth(data).then(res => {
						this.tradeList.push(...res.data)
					})
				} else if (this.data_index == 0) {
					this.page = 1;
					this.tradeList = [];
					var data = {
						id: this.id,
						page: this.page
					};
					getBusinessOrderList(data).then(res => {
						this.tradeList.push(...res.data)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		padding: 0 200rpx;

		.title_text {
			padding-bottom: 30rpx;
		}

		.change {
			border-bottom: 2px solid red;
		}
	}

	.img_body {
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;

		.image {
			padding: 30rpx 30rpx 30rpx 30rpx;
			width: 12px;
			height: 12px;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			padding: 30rpx 0 0 0;
			color: #fd6738;
		}
	}

	.page {
		min-height: 100%;

		.bodys {
			padding: 0 30rpx 30rpx 30rpx;

			.cont {
				margin-bottom: 10px;
				background-color: white;
				border-radius: 30rpx;

				.cont_body {
					padding: 30rpx;

					.order_title {
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;

						.order_id {
							color: #666666;
						}
					}

					.order_cont {
						padding: 10rpx 0 10rpx 0;
						display: flex;

						.order_cont_left {
							color: #666666;
						}

						.order_cont_right {
							padding: 0 20rpx;
						}

						.btn_css {
							background-color: #ff6433;
							color: white;
							border-radius: 30rpx;
							padding: 10rpx 20rpx;
							text-align: center;
						}
					}
				}
			}

			.bodys_title {
				.bodys_title_left {}

				.bodys_title_right {
					color: #999999;
				}
			}

			.bodys_cont {
				background-color: white;
				border-radius: 15rpx;
				padding: 30rpx;
				margin-top: 30rpx;
				text-align: center;

				.bodys_cont_left {
					.bodys_cont_left_fir {}

					.bodys_cont_left_se {
						font-weight: 550;
						font-size: 20px;
						padding: 10rpx;
					}
				}

				.bodys_cont_right {
					.bodys_cont_right_fir {}

					.bodys_cont_right_se {
						font-weight: 550;
						font-size: 20px;
						padding: 10rpx;
					}
				}
			}
		}
	}
</style>